<template>
    <div class="specialAlbum" v-if="DigitalAlbumList">
      <div class="specialAlbum-top" >
        <div>
          <svg class="icon" @click="$router.go(-1)">
            <use xlink:href="#icon-zuo1"></use>
          </svg>
        </div>
        <div class="title">{{DigitalAlbumList.album.name}}</div>
        <div></div>
      </div>
      <div class="specialAlbum-main">
        <img :src="DigitalAlbumList.album.blurPicUrl" alt="">
        <div class="main-title">
            <div class="name">歌手 : {{DigitalAlbumList.album.artist.name}}</div>
            <div>发行时间 : <br/>{{publishTime(DigitalAlbumList.album.publishTime)}}</div>
            <div>发行公司 : <br/>{{DigitalAlbumList.album.company}}</div>
        </div>
      </div>
      <div class="specialAlbum-present" :class="is?'addclass':''">
          <div class="present-title">专辑介绍 : </div>
          <div class="present-new" v-for="(item,i) in value(DigitalAlbumList.album.description)" :key="i">
              {{item}}
          </div>
      </div>
       <div class="specialAlbum-circuit">
           <svg class="icon" aria-hidden="true" v-show="!is" @click="is=!is">
                <use xlink:href="#icon-xiajiantou1"></use>
            </svg>
            <svg class="icon" aria-hidden="true" v-show="is" @click="is=!is">
                <use xlink:href="#icon-shangjiantou"></use>
            </svg>
       </div>
       <div class="specialAlbum-list">
           <div class="list-title">歌曲列表<span>{{DigitalAlbumList.songs.length}}首</span></div>
           <div class="musicList" v-for="(item,i) in DigitalAlbumList.songs" :key="i" @click="setplay(item)">
               <div class="index">{{i+1}}</div>
               <div class="music">{{item.name}}</div>
               <div class="name" ><span v-for="(time,k) in item.ar" :key="k">{{time.name}}</span></div>
               <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofang3"></use>
               </svg>
           </div>
       </div>
    </div>
</template>
<script>
import { useRoute } from 'vue-router'
import { setAlbums } from '@/api/index.js'
export default {
  data () {
    return {
      DigitalAlbumList: '',
      is: false
    }
  },
  async mounted () {
    const route = useRoute()
    const id = route.query.id
    console.log(id)
    const DigitalAlbum = await setAlbums(id)
    this.DigitalAlbumList = DigitalAlbum.data
    console.log(this.DigitalAlbumList)
  },
  methods: {
    publishTime (num) {
      const date = new Date(num)
      const y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? ('0' + MM) : MM
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      return y + '-' + MM + '-' + d
    },
    value (num) {
      const value = num.split('\n')
      return value
    },
    setplay (item) {
      console.log(item)
      this.$store.commit('pushPlaylist', item)
      this.$store.commit('setPlayIndex', this.$store.state.playlist.length - 1)
    }
  }
}
</script>
<style lang="less" scoped>
.specialAlbum{
     width: 7.5rem;
    .specialAlbum-top{
        height: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        .icon{
            width: 0.6rem;
            height: 0.6rem;
        }
        .title{
            font-size: 0.4rem;
            font-style: italic;
        }
    }
    .specialAlbum-main{
        width: 7.1rem;
        margin: 0.2rem auto;
        display: flex;
        img{
            width: 4rem;
            height: 3rem;
         }
         .main-title{
             margin-left: 0.2rem;
             .name{
                 font-size: 0.35rem;
                 font-weight: 900;
             }
             div{
                 margin: 0.1rem;
                 font-size: 0.25rem;
             }
         }
    }
    .specialAlbum-present{
        width: 7.1rem;
        margin: 0.2rem auto 0 auto;
        //height: 7.7rem;
        height: 1.35rem;
        overflow:scroll;
        .present-title{
            font-size: 0.4rem;
            font-weight: 900;
        }
        .present-new{
            text-indent: 2em;
        }
    }
    .addclass{
        height: 7.2rem;
        overflow:scroll;
    }
    .specialAlbum-circuit{
        width: 0.4rem;
        margin: 0.1rem auto;
        .icon{
            width: 0.4rem;
            height: 0.4rem;
        }
    }
    .specialAlbum-list{
        width: 7.1rem;
        margin: 0 auto;
        height: 5.6rem;
        overflow:scroll;
        .list-title{
            font-size: 0.4rem;
            font-weight: 900;
            span{
                font-size: 0.25rem;
                color: #ccc;
                margin-left: 0.2rem;
            }
        }
        .musicList{
            display:flex;
            align-items: center;
            line-height: 0.8rem;
            border: 1px solid #ccc;
            padding: 0 0.2rem;
            font-size: 0.3rem;
            margin-top: 0.1rem;

            .index{
                width: 0.5rem;
            }
            .music{
                width: 3.5rem;
            }
            .name{
                width: 1.2rem;
            }
            .name,.music{
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                margin-right:0.2rem;
            }
            .icon{
                width: 0.4rem;
                height: 0.4rem;
                margin-left: 0.5rem;
            }

        }
    }
}
</style>
